<template>
  <div class="listRight" ref="listRight">
     <div class="content">
       <div class="updown">
          <div v-show="isUpDown">下拉刷新</div>
          <div v-show="!isUpDown">
              <div v-show="isLoad">数据加载中...</div>
              <div v-show="!isLoad">数据请求成功</div>
          </div>
       </div>
       <div class="itemRow" v-for="item in listArr" :key="item.id">
          <NewestItem :itemObj=item />
       </div>
       <div class="more">
          <div v-show="!ismore">没有数据了</div>
          <div v-show="ismore">数据加载中...</div>
       </div>
     </div>
  </div>
</template>

<script>
import NewestItem from '@/components/NewestItem'
import { getListCont } from '@/network/innerAxios'

import BScroll from '@better-scroll/core'
import Pullup from '@better-scroll/pull-up'
import PullDown from '@better-scroll/pull-down'
BScroll.use(Pullup)
BScroll.use(PullDown)
export default {
  props: {
    myCid: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      listArr: [],
      resList: [],
      isUpDown: true,
      isLoad: true,
      ismore: false,
      page: 1,
      cid: 47
    }
  },
  components: {
    NewestItem
  },
  watch: {
    myCid (val) {
      this.cid = val
      this.page = 1
      this.listArr = []
      this.bscroll.scrollTo(0, 0, 500)
      this.getListData()
      this.bscroll.refresh()
    }
  },
  async mounted () {
    await this.getListData()
    this.initScroll()
  },
  methods: {
    async getListData () {
      await getListCont(this.page, this.cid).then(res => {
        const oldList = this.listArr
        const newList = oldList.concat(res.data)
        this.listArr = newList
        this.resList = res.data
      })
    },
    // 初始化betterscroll
    initScroll () {
      this.bscroll = new BScroll(this.$refs.listRight, {
        // 上拉触底
        pullUpLoad: true,
        //  上拉刷新
        pullDownRefresh: true,
        click: true
      })
      this.bscroll.on('pullingUp', this.pullupFun)
      this.bscroll.on('pullingDown', this.pullDownFun)
    },
    // 上拉触底
    async pullupFun () {
      this.ismore = true
      if (!this.resList.length) {
        this.ismore = false
        this.bscroll.finishPullUp()
        return
      }
      this.page++
      await this.getListData()
      // 接触上拉触底
      this.bscroll.finishPullUp()
      this.bscroll.refresh()
    },
    // 下拉刷新
    async pullDownFun () {
      this.isUpDown = false
      this.page = 1
      this.listArr = []
      await this.getListData()
      this.isLoad = false
      setTimeout(() => {
        this.bscroll.finishPullDown()
        this.isUpDown = true
      }, 1000)
      this.bscroll.refresh()
    }
  }
}
</script>

<style lang="less" scoped>
.listRight{
  padding: 0 0.1rem;
  height: 100%;
  overflow: hidden;
  .content{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .itemRow{
      padding-top: 0.1rem;
      width: 48%;
    }
    .more,.updown{
      font-size: 0.28rem;
      color: #ccc;
      line-height: 1rem;
      padding-left: 2rem;
    }
    .updown{
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      transform: translateY(-100%);
    }
  }
}
</style>
